<template>
  <div style="height: 50px">
    <a @click="redirectToLogin" style="position:absolute;right: 50%;text-align: center"> 点击跳转到登录</a><br>
    <a @click="redirectToConsole" style="position:absolute;right: 50%;text-align: center"> 点击跳转到管理页面</a>
  </div>
  <div>
    <img src="../assets/login-background.jpg" style="height: 700px;width: 100%; background-size: cover;opacity: 0.3;"/>
    <div style="margin-top:-550px">
      <!--      <div style="position: fixed;font-size:50px;left:300px">欢迎</div>-->
      <!--      <div style="position: fixed;font-size:50px;right:140px">使用</div>-->
      <a-carousel arrows dots-class="slick-dots slick-thumb" autoplay>
        <template #customPaging="props">
          <a style="width:600px;height:600px;">
            <img :src="getImg(props.i)"/>
          </a>
        </template>

        <div v-for="item in 4" :key="item">
          <img :src="getImg(item - 1)"/>
        </div>
      </a-carousel>
    </div>

  </div>

</template>


<script>
import {defineComponent} from 'vue';
import {useRouter} from "vue-router";

export default defineComponent({

  data() {
    return {
      imgUrl: [require("../assets/abstract01.jpg"), require("../assets/abstract02.jpg"), require("../assets/abstract03.jpg"), require("../assets/abstract04.jpg")]
    }
  },
  methods: {
    getImg(i) {
      return this.imgUrl[i];
    }
  },
  setup() {
    const router = new useRouter();
    const redirectToLogin = () => {
      router.push('/login')
    }
    const redirectToConsole = () => {
      router.push('/console/consultation')
    }
    return {
      redirectToLogin,
      redirectToConsole,

    }
  }
});
</script>


<style scoped>
/* For demo */
.ant-carousel :deep(.slick-dots) {
  position: relative;
  height: auto;
}

.ant-carousel :deep(.slick-slide img) {
  border: 5px solid #fff;
  display: block;
  margin: auto;
  max-width: 80%;
}

.ant-carousel :deep(.slick-arrow) {
  display: none !important;
}

.ant-carousel :deep(.slick-thumb) {
  bottom: 0px;
}

.ant-carousel :deep(.slick-thumb li) {
  width: 60px;
  height: 45px;
}

.ant-carousel :deep(.slick-thumb li img) {
  width: 100%;
  height: 100%;
  filter: grayscale(100%);
  display: block;
}

.ant-carousel :deep .slick-thumb li.slick-active img {
  filter: grayscale(0%);
}

</style>
